<template>
  <div class="room">
    <swiper height="7.5rem"
            class="swiper"
            :interval="1000"
            :show-dots=false
            auto>
      <swiper-item v-for="(item, index) in list"
                   :key="index"
                   class="swiper_item">
        <img :src="item.img"
             width="100%"
             height="100%">
      </swiper-item>
    </swiper>
    <div class=" room_detail">
      <div class="name  "> {{room.category}}</div>
      <p class="price">原价:{{room.originalPrice}}元 &nbsp;
        会员价:{{room.price}}元({{room.todayDiscount}}折)
      </p>
      <div class="flex around pd20">
        <div class="flex column">
          <img src="../../assets/image/peo_num.png"
               width="30"
               class="mb10">
          <p>{{specList[0]}}</p>
        </div>
        <div class="flex column">
          <img src="../../assets/image/bed.png"
               width="30"
               class="mb10">
          <p>{{specList[1]}}</p>
        </div>
        <div class="flex column">
          <img src="../../assets/image/area.png"
               width="25"
               class="mb10">
          <p>{{specList[2]}}</p>
        </div>
      </div>
    </div>
    <div class="datechoose flex between "
         @click="dateShow= true">
      <div class="box">
        <p class="col_sub">入住</p>
        <div class="fz28">
          <span>{{value[0] |month}}月{{value[0] |day}}日</span>
          <span>{{value[0] |week}}</span>
        </div>
      </div>
      <div class="time_around flex">{{value|days}}晚</div>
      <div class="box">
        <p class="col_sub t-r">离店</p>
        <div class="fz28">
          <span>{{value[1] |month}}月{{value[1] |day}}日</span>
          <span>{{value[1] |week}}</span>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="tit">
        房间介绍
      </div>
      <p>{{room.synopsis}}</p>
    </div>
    <div class="block">
      <div class="tit">
        配套设施
      </div>
      <div class="flex between pd20">
        <div class="flex column li">
          <div class="img flex"><img src="../../assets/image/attach.png"
                 width="20"
                 class="mb10"></div>

          <p>{{incList[0]}}</p>
        </div>
        <div class="flex column">
          <div class="img flex">
            <img src="../../assets/image/attach.png"
                 width="20"
                 class="mb10">
          </div>
          <p>{{incList[1]}}</p>
        </div>
        <div class="flex column">
          <div class="img flex">
            <img src="../../assets/image/attach.png"
                 width="20"
                 class="mb10">
          </div>
          <p>{{incList[2]}}</p>
        </div>
        <div class="flex column">
          <div class="img flex more"
               @click="showToast=true">
            {{incList.length}}
          </div>
          <p>{{incList[3]}}</p>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="tit">
        相关政策
      </div>
      <p>{{room.relatedPolicies}}</p>
    </div>
    <div class="fixbtn flex "
         :class="disable?'disable':''"
         @click="order">
      <p v-if="disable">已满房</p>
      <p v-else><span class="mr20"> ￥ {{roomOrderDetail.amount}}元</span> 立即预订</p>
    </div>
    <x-dialog v-model="showToast">
      <div class="dialog">
        <div class="header">
          配套设施
        </div>
        <div class="item bor_b"
             v-for="(item,index) in incList"
             :key='index'>
          {{item}}
        </div>

        <div @click="showToast=false"
             class="close">
          <span> ×</span>
        </div>
      </div>

    </x-dialog>
    <popup v-model="dateShow">

      <inline-calendar v-model="value"
                       @on-change='choose'
                       disable-past
                       range>
      </inline-calendar>
    </popup>
  </div>
</template>
<script>
import { Swiper, SwiperItem, InlineCalendar, Popup, XDialog } from 'vux'
import * as API from '../../api'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    Swiper, SwiperItem, XDialog, InlineCalendar, Popup
  },
  data () {
    return {
      user: '',
      showToast: false,
      dateShow: false,
      value: [],
      specList: [],
      incList: [],
      list: [],
      room: '',
      canOrder: false,
      disable: true,
      roomOrderDetail: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'date'])
  },
  created () {
    localStorage.removeItem("sign");
    console.log(this.$route.query.roomId)
    this.value[0] = this.date[0]
    this.value[1] = this.date[1]
    this.$http.get(API.user, {
      params: {
        openId: this.userInfo.openId
      }    }).then(res => {
      this.user = res.data
    }).catch(err => {
      console.log(err)
    })
    this.$http.get(API.roomDetail, {      params: {
        roomId: this.$route.query.roomId
      }    }).then(res => {
      this.room = res.data
      let { spec, incidentFacilities } = this.room
      this.specList = spec.split(',')
      this.incList = incidentFacilities.split(',')
      this.list = this.room.fileList.map((item) => ({
        img: `https://www.felixmantuoluo.com/${item.url}`
      }))
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    ...mapActions(['orderStore', 'dateChoose']),
    choose (value) {
      console.log(this.value)
      if (this.value.length > 2) this.value.splice(0, 2)
      if (Date.parse(new Date(this.value[0])) > Date.parse(this.value[1])) this.value.splice(1, 1)
      if (this.value.length === 2) {
        this.dateShow = false
        this.ifOrder()
        this.valuation()
        this.dateChoose(value)
      }
    },
    order () {
      if (this.disable) return
      if (this.user.loginStatus === '0') {
        this.$router.push('/register')
        console.log('没登录')
      } else if (this.user.isBind === 0) {
        console.log('没绑卡')
        this.$router.push('/mycard')
      } else if (this.user.isBind === 1) {
        console.log('绑卡')

        let data = {
          roomId: this.room.id,
          date: this.value,
          roomOrderDetail: this.roomOrderDetail
        }
        console.log(data)
        this.orderStore(data)
        this.$router.push({
          name: 'roomOrder',
          params: data        })
      }
    },
    ifOrder () {
      this.$http.get(API.canOrder, {        params: {
          roomId: this.$route.query.roomId,
          startTime: this.value[0],
          endTime: this.value[1]
        }      }).then(res => {
        if (res.data.code === 0) {
          this.disable = false
        } else if (res.data.code === 1) {
          this.disable = true
        }
      }).catch(err => {
        console.log(err)
      })
    },
    valuation () {
      this.$http.get(API.valuation, {        params: {
          openId: this.userInfo.openId,
          roomId: this.$route.query.roomId,
          startTime: this.value[0],
          endTime: this.value[1]
        }      }).then(res => {
        console.log(res.data)
        if (res.data.code === 0) {
          this.roomOrderDetail = res.data
          console.log(res.data)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.room {
  padding-bottom: 100px;
}
.room_detail {
  margin: 0 20px;
  box-shadow: 0 0.01562rem 0.01562rem 0 rgba(0, 0, 0, 0.1);
  position: relative;
  top: -60px;
  border-radius: 5px;
  @extend .bg_fff;
  .name {
    @extend .bor_b;
    @extend .fwb;
    font-size: 36px;
    line-height: 90px;
    padding-left: 20px;
  }
  .price {
    padding: 20px;
    @extend .col_mian;
    @extend .fwb;
    font-size: 30px;
  }
}
.datechoose {
  border-radius: 5px;
  margin: -40px 20px 0;
  @extend.bg_fff;
  padding: 20px;
  box-shadow: 0 0.01562rem 0.01562rem 0 rgba(0, 0, 0, 0.1);
}
.block {
  width: 100%;
  @extend .bg_fff;
  margin: 20px 0;
  padding: 20px;
  box-sizing: border-box;
  .tit {
    font-size: 30px;
    color: #666;
    font-weight: bold;
  }
  p {
    margin: 10px 0;
  }
  .img {
    width: 80px;
    height: 80px;
    background: #f3f3f3;
    border-radius: 50%;
  }
  .more {
    @extend .col_fff;
    background-image: linear-gradient(227deg, #40b9ff, #4285f6);
  }
}

.dialog {
  font-size: 28px;

  .header {
    font-size: 30px;
    background-color: #fafafa;
    padding: 30px;
    font-weight: bold;
  }
  .item {
    text-align: left;
    padding: 20px;
    margin: 20px 20px 0;
    background: url("../../assets/image/attach.png") no-repeat right center/35px;
  }
  .close {
    padding: 10px;
    span {
      font-size: 50px;
      color: #ccc;
    }
  }
}
</style>
